<template>
  <div class="distribute-rule-main h_full">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img
            class="back-cover"
            src="@/assets/images/arrow-left.png"
            @click="onNavigationBack()"
          />
        </div>
        <strong>批量设置分配规则</strong>
      </div>
    </div>
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class=""
      label-position="left"
    >
      <div class="config-box">
        <div class="config-settig-card">
          <el-form-item label="是否分配：" prop="isdistribution">
            <el-radio-group v-model="form.isdistribution">
              <el-radio :label="0">不分配</el-radio>
              <el-radio :label="1">分配</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.isdistribution == 1"
            label="分配规则："
            prop="pass"
          >
            <el-radio-group v-model="form.type" class="rulegroup">
              <div class="radio-card">
                <el-radio :label="0">随机分配</el-radio>
                <div class="rule-type-tip">将对话随机分配给所有上班的客服</div>
              </div>
              <div class="radio-card">
                <el-radio :label="1">优先分配</el-radio>
                <div class="rule-type-tip">
                  将对话优先分配给某个分组上班的客服，该分组客服均达承接上限后会分配其他客服
                </div>
              </div>
              <div class="radio-card">
                <el-radio :label="2">固定分配</el-radio>
                <div class="rule-type-tip">
                  将对话固定分配给某个分组上班的客服，该分组客服均达承接上限后对话进入排队
                </div>
              </div>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>

      <div class="config-box">
        <div class="config-settig-card">
          <el-form-item label="企微号：" prop="pass">
            <el-select
              v-if="form.type == 2"
              v-model="value"
              placeholder="请选择"
              size="small"
              style="margin-right: 8px"
            >
              <el-option
                v-for="item in company"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button
              plain
              icon="el-icon-plus"
              size="small"
              @click="handleOpenQw"
            >选择企微号</el-button>
            <div class="selectfinshbox flex flex aligncenter flexwrap bg_fff br_4 p-6 mt-8">
              已选：
              <div class="flex">
                <img
                  v-for="item in 4"
                  :key="item"
                  src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                  class="mr-4 selectimg"
                  alt=""
                />
              </div>
              <div
                class="morebox selectimg flexcenter f-16 bg_fff commhover"
                @click="handleOpenQw"
              >
                <i class="el-icon-more"></i>
              </div>
              等 <span class="c_primary plr-6">1</span> 个
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="config-box" v-if="form.type === 2">
        <div class="config-settig-card">
          <el-form-item label="私聊分配规则：" prop="pass">
            <el-radio-group v-model="form.rule">
              <el-radio :label="0">所有私聊对话</el-radio>
              <el-radio :label="1">按标签设置</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="form.rule==1">
            <el-form-item label=''>
              <div class="flex title-tips">
                <i class="el-icon-warning rotate180 c_primary f-14"></i>
                <div class="ml-10">
                  当私聊客户同时满足多个分配规则时，需按已设置的规则优先级来分配，“01”为最高优先级，以此类推；最多设置5个规则，最少设置1个规则。
                </div>
              </div>
            </el-form-item>
            <el-form-item v-for="(item,index) in form.rules" :key="index" label=''>
              <div class="rulebox br_4 p_relative">
                <div class="ruleheader flexbetween bg_fff plr-12">
                  <span>规则</span>
                  <el-dropdown @command="handleCommand($event,index)">
                    <span>
                      <svg-icon icon-class='ilist2' class-name="c_text2" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a" v-if="index!==0">置顶</el-dropdown-item>
                      <el-dropdown-item command="b" v-if="index!==0">上移</el-dropdown-item>
                      <el-dropdown-item command="c" v-if="index!==form.rules.length-1">下移</el-dropdown-item>
                      <el-dropdown-item command="d" v-if="index!==form.rules.length-1">置底</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="rulebody p-16">
                  <el-form-item label="企微标签：" label-width="90px" class="mb-10">
                    <div class="flex">
                      <el-select
                        v-model="item.labelType"
                        placeholder=""
                        size="small"
                        class="mr-8"
                        style="width: 126px"
                      >
                        <el-option
                          v-for="(item, index) in lableList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                      <multipleSelect
                        v-model="item.label"
                        size="small"
                        placeholder="企微标签"
                        width="300px"
                        :receiverNameOpt="lableOpt"
                      ></multipleSelect>
                    </div>
                  </el-form-item>
                  <el-form-item label="对应分组：" label-width="90px" class="mb-10">
                    <TreeSelect
                      v-model="item.group"
                      placeholder="请选择"
                      :props="{
                        value:'id',
                        label: 'label',
                        children: 'children',
                      }"
                      :options="treeList"
                      width="436px"
                    ></TreeSelect>
                  </el-form-item>
                </div>
                <div class="ruleindex br_4 c_text2 flexcenter fw-6">0{{index+1}}</div>
              </div>
            </el-form-item>
            <el-form-item label="" prop="pass">
              <div class="c_text3">未满足以上规则固定分配至：</div>
              <TreeSelect
                v-model="form.group"
                placeholder="请选择"
                :props="{
                  value:'id',
                  label: 'label',
                  children: 'children',
                }"
                :options="treeList"
                width="500px"
              ></TreeSelect>
            </el-form-item>
          </template>
          <el-form-item v-if="form.rule==0" label="对应分组：" prop="pass">
            <TreeSelect
              v-model="form.group"
              placeholder="请选择"
              :props="{
                value:'id',
                label: 'label',
                children: 'children',
              }"
              :options="treeList"
              width="500px"
            ></TreeSelect>
          </el-form-item>
        </div>
      </div>
      <div class="config-box" v-if="form.type != 0">
        <div class="config-settig-card">
          <el-form-item
            v-if="form.type === 2"
            label="群聊分配规则："
            prop="pass"
          >
            <el-radio-group v-model="form.groupRule" disabled>
              <el-radio :label="0">开启分配的所有群聊对话</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="对应分组：" prop="pass">
            <TreeSelect
              v-model="form.group"
              placeholder="请选择"
              :props="{
                value:'id',
                label: 'label',
                children: 'children',
              }"
              :options="treeList"
              width="500px"
            ></TreeSelect>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="new-fan-footer">
      <el-button size="small" type="primary" @click="handleSubmit">保存生效</el-button>
      <el-button size="small" plain>取消</el-button>
    </div>

    <!-- 选择企微号 -->
    <SelectWechat
      v-if="showEwechat"
      :visableIf.sync="showEwechat"
      width="670px"
      :showRecord="false"
      :showWarning="false"
    />
  </div>
</template>
<script>
import SelectWechat from "@/components/UserGroupComp/SelectWechat";
import TreeSelect from "@/components/TreeSelect";
import MultipleSelect from "@/components/MultipleSelect";
export default {
  data() {
    return {
      form: {
        isdistribution: 0,
        type: 0,
        groupRule: 0,
        rule: 0,
        rules:[
          {labelType:0, label:'',group:''},
          {labelType:0, label:'',group:''},
          {labelType:0, label:'',group:''},
          {labelType:0, label:'',group:''},
          {labelType:0, label:'',group:''},
        ],
      },
      company: [
        { id: 1, name: "锐行" },
        { id: 2, name: "志新" },
      ],
      treeList: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 2,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 3,
          label: "一级 2",
        },
      ],
      defaultData: {
        value: "",
        name: "",
      },
      value: "",
      showEwechat: false,
      lableList: [
        { label: "含任意标签", value: 0 },
        { label: "含所有标签", value: 1 },
        { label: "未打任何标签", value: 2 },
      ],
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
    };
  },
  components: {
    SelectWechat,
    TreeSelect,
    MultipleSelect
  },
  methods: {
    onNavigationBack() {
      this.$router.go(-1);
    },

    handleOpenQw() {
      this.showEwechat = true;
    },

    selectDrop(val) {
      this.defaultData.value = val;
    },

    handleCommand(type,index){
      console.log('this.form.rules:', this.form.rules)
      switch (type) {
        case 'a':
          // 置顶
          this.handleTop(index)
          // arr.unshift(arr.splice(index, 1)[0]);
          break;
        case 'b':
          // 上移
          this.handleMoveTop(index)
          // arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
          break;  
        case 'c':
          // 下移
          this.handleMoveDown(index)
          // arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
          break; 
         case 'd':
          // 置底
          this.handleDown(index)
          // arr.push(arr.splice(index, 1)[0]);
          break;  
        default:
          break;
      }
    },

    // 下移
    handleMoveDown(index) {
      let arr = this.form.rules
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
    },
    // 上移
    handleMoveTop(index) {
      let arr = this.form.rules
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
    },

    // 置底
    handleDown(index) {
      let arr = this.form.rules
      arr.push(arr.splice(index, 1)[0]);
    },
    // 置顶
    handleTop(index) {
      let arr = this.form.rules;
      arr.unshift(arr.splice(index, 1)[0]);
    },

    handleSubmit(){
      console.log('this.form.group:', this.form.group)
    }
  },
};
</script>
<style lang="scss" scoped>
.distribute-rule-main {
  overflow-y: auto;
  padding-bottom: 80px;
  .nav-back-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;
        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  // .distribute-rule-body {
  //   margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-direction: column;
      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        padding: 24px;
        margin-bottom: 16px;
        .radio-card {
          display: inline-block;
          width: 300px;
          height: 96px;
          padding: 16px;
          border: 1px solid #f0f0f0;
          border-radius: 4px;
          margin-right: 12px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
        }
        .rule-type-tip {
          display: block;
          margin-top: 4px;
          font-size: 12px;
          font-weight: 400;
          line-height: 22px;
          padding-left: 24px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
  .new-fan-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
// }
.rulegroup {
  display: flex;
  align-items: center;
}
.title-tips {
  background-color: #f0f7ff;
  padding: 8px 15px;
  border: 1px solid #abceff;
  word-wrap: break-word;
  border-radius: 4px;
  max-width: 730px;
  line-height: 24px;
  align-items: baseline;
}
.rulebox{
  max-width: 730px;
  border: 1px solid #e9e9e9;
  background-color: #f3f3f3;
  .ruleheader{
    height: 44px;
  }
  .ruleindex{
    position: absolute;
    top: 0;
    left: -40px;
    width: 32px;
    height: 32px;
    background: #ebf2ff;
    line-height: 20px;
  }
}
.selectfinshbox {
  width: 588px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
}
.selectimg {
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 2px;
}
</style>